<template>
	<view class="home">
			<scroll-view scroll-x="true" class="navscroll">
				<view class="item" :class="index==navIndex?'active':''" v-for="(item,index) in navArr" @click="clickNav(index,item.id)" :key="item.id">{{item.classname}}</view>
			</scroll-view>
			
			
		<view class="content">
			<view class="row" v-for="item in newsArr" :key="item.id">
				<newsbox :item="item" @click.native="goDetail(item)"></newsbox>
			</view>
		</view>
		
		<view class="nodata" v-if="!newsArr.length">
			<image src="../../static/images/nodata.png" mode="widthFix"></image>
		</view>
		
		
		<view class="loading" v-if="newsArr.length">
			<view v-if="loading==1">数据加载中...</view>
			<view v-if="loading==2">没有更多了~~</view>
		</view>
	</view>
</template>
<script>
	export default{
		data(){
			return{
				navIndex:0,
				navArr:[],
				newsArr:[],
				currentPage:1,
				loading:0   //0默认 1加载中 2没有更多了
			}
		},
		onLoad() {
			this.getNavData()
			this.getNewsData()
		},
		// 页面触底触发的回调函数
		onReachBottom(){
			if(this.loading==2){
				return
			}
			this.loading=1
			this.currentPage++
			this.getNewsData()
		},
		methods:{
			// 点击导航栏切换
			clickNav(index,id){
				this.navIndex=index
				this.currentPage=1
				this.loading=0
				this.newsArr = []
				this.getNewsData(id)
			},
			// 跳转到详情页
			goDetail(item){
				uni.navigateTo({
					url:`/pages/detail/detail?cid=${item.classid}&id=${item.id}`
				})
			},
			// 获取导航列表
			getNavData(){
				uni.request({
					url:"https://ku.qingnian8.com/dataApi/news/navlist.php",
					success:res=>{
						this.navArr=res.data
					}
				})
			},
			// 获取新闻列表数据
			getNewsData(id=50){
				uni.request({
					url:"https://ku.qingnian8.com/dataApi/news/newslist.php",
					data:{
						cid:id,
						page:this.currentPage
					},
					success:res=>{
						// 判断页面是否有数据，切换为loading为2
						if(res.data.length==0){
							this.loading=2
						}
						this.newsArr=[...this.newsArr,...res.data]
					}
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
.navscroll{
	height:100rpx;
	background: #f7f8fa;
	white-space: nowrap;
	position: fixed;
	top: var(--window-top);
	left: 0;
	z-index: 10;
	.item{
		font-size: 40rpx;
		display: inline-block;
		line-height: 100rpx;
		padding: 0 30rpx;
		color: #333;
		&.active{
			color: #1296db;
		}
	}
}
.content{
	padding: 30rpx;
	padding-top: 130rpx;
	.row{
		border-bottom:1px dotted #efefef ;
		padding: 20rpx 0;
	}
}
.nodata{
	display: flex;
	justify-content: center;
	image{
		width: 360rpx;
	}
}
.loading{
	text-align: center;
	font-size: 26rpx;
	color: #888;
	line-height: 2em;
}
</style>
